import React from 'react';
import { Link } from 'react-router';
import { observer } from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'SortDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({ name: this.name });


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }
    componentWillReact() {
        // console.log(arguments);
    }

    render() {

        return (
            <div className="orin-s-sortdialog-root">
                <div className={this.store.visible ? 'sort-mask fade-in' : 'sort-mask fade-out'}
                     onClick={(e) => this.store.closeDialog(e)}>
                    <div className="sort-wrapper" onClick={(e) => e.stopPropagation()}>
                        <div className="sort-header">
                            <p>{'排序'}</p>
                            <span onClick={(e) => this.store.closeDialog(e)}>
                            <ReIcon icon="window_closes"/>
                        </span>
                        </div>
                        <div className="sort-content">
                            <span className="text">移动排序至第</span>
                            <ReTextField
                                isLabel={false}
                                type="number"
                                className="sort-form-input"
                                notfullWidth={false}
                                onChange={(e, v) => this.store.sortChange(v)}
                                // onBlur={}
                                supportIntOnly={true}
                                value={this.store.sortNum}
                                closeIcon={false}/>
                        </div>
                        <div className="sort-footer">
                            <ReButton
                                onClick={(e) => this.store.confirmDialog(e)}
                                className="confirm"
                                label={'确定'}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}